import { Heading, InfoCard } from '@theguild/components';

export function InfoCardsSection() {
  return (
    <section className="px-4 py-6 sm:py-12 md:px-6 xl:px-[120px] lg:py-24">
      <Heading as="h2" size="md" className="text-balance text-center">
        Query anything, run anywhere
      </Heading>
      <ul className="mt-6 flex flex-row flex-wrap justify-center gap-2 md:mt-16 md:gap-6">
        <InfoCard
          as="li"
          heading="GraphQL as a Query Language"
          icon={<GitBranchIcon />}
          className="flex-1 rounded-2xl md:rounded-3xl"
        >
          Utilize GraphQL as a universal query language with Mesh, fetching data directly from any
          data source without intermediaries.
        </InfoCard>
        <InfoCard
          as="li"
          heading="OmniGraph"
          icon={<FlowChartIcon />}
          className="flex-1 basis-full rounded-2xl md:basis-0 md:rounded-3xl"
        >
          Compose diverse sources into a single GraphQL schema with Mesh, simplifying complex data
          integrations.
        </InfoCard>
        <InfoCard
          as="li"
          heading="Open Source"
          icon={<GroupIcon />}
          className="flex-1 basis-full rounded-2xl md:rounded-3xl lg:basis-0"
        >
          Mesh thrives on community-driven innovation, offering an open-source framework that
          welcomes custom extensions.
        </InfoCard>
      </ul>
    </section>
  );
}

function GitBranchIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
      <path
        d="M7.59465 14.9388C8.18293 15.172 8.67066 15.6044 8.97271 16.1605C9.27477 16.7165 9.37197 17.361 9.24736 17.9815C9.12276 18.6019 8.78425 19.1589 8.29091 19.5552C7.79758 19.9515 7.18074 20.1621 6.54803 20.15C5.91532 20.138 5.30692 19.9042 4.829 19.4894C4.35108 19.0746 4.03397 18.5052 3.93303 17.8805C3.83208 17.2558 3.9537 16.6154 4.27666 16.0712C4.59963 15.527 5.10343 15.1135 5.70015 14.9028V9.19681C5.0994 8.9845 4.59306 8.56664 4.27062 8.01709C3.94818 7.46754 3.83041 6.82169 3.93812 6.1937C4.04582 5.56571 4.37208 4.99602 4.85921 4.58533C5.34634 4.17463 5.96299 3.94937 6.60015 3.94937C7.2373 3.94937 7.85395 4.17463 8.34108 4.58533C8.82821 4.99602 9.15447 5.56571 9.26218 6.1937C9.36988 6.82169 9.25211 7.46754 8.92967 8.01709C8.60723 8.56664 8.10089 8.9845 7.50015 9.19681V12.0498C8.25255 11.4846 9.18675 11.1498 10.2001 11.1498H13.8001C14.3924 11.1498 14.9683 10.9552 15.4391 10.5958C15.9099 10.2364 16.2495 9.73217 16.4056 9.16081C15.8145 8.92673 15.3249 8.4916 15.023 7.93204C14.7211 7.37247 14.6263 6.72435 14.7553 6.10176C14.8843 5.47918 15.2287 4.92205 15.7281 4.52846C16.2274 4.13487 16.8496 3.93005 17.4851 3.95007C18.1206 3.97009 18.7286 4.21365 19.2022 4.63788C19.6758 5.06211 19.9845 5.63981 20.074 6.26928C20.1636 6.89875 20.0282 7.53962 19.6917 8.07908C19.3552 8.61854 18.8391 9.02199 18.2344 9.21841C18.0532 10.263 17.509 11.2101 16.6978 11.8928C15.8865 12.5754 14.8604 12.9497 13.8001 12.9498H10.2001C9.60785 12.9498 9.03196 13.1445 8.56116 13.5039C8.09037 13.8633 7.75076 14.3675 7.59465 14.9388ZM6.60015 16.5498C6.36145 16.5498 6.13253 16.6446 5.96375 16.8134C5.79497 16.9822 5.70015 17.2111 5.70015 17.4498C5.70015 17.6885 5.79497 17.9174 5.96375 18.0862C6.13253 18.255 6.36145 18.3498 6.60015 18.3498C6.83884 18.3498 7.06776 18.255 7.23654 18.0862C7.40533 17.9174 7.50015 17.6885 7.50015 17.4498C7.50015 17.2111 7.40533 16.9822 7.23654 16.8134C7.06776 16.6446 6.83884 16.5498 6.60015 16.5498ZM6.60015 5.74981C6.36145 5.74981 6.13253 5.84463 5.96375 6.01342C5.79497 6.1822 5.70015 6.41112 5.70015 6.64981C5.70015 6.88851 5.79497 7.11743 5.96375 7.28621C6.13253 7.45499 6.36145 7.54981 6.60015 7.54981C6.83884 7.54981 7.06776 7.45499 7.23654 7.28621C7.40533 7.11743 7.50015 6.88851 7.50015 6.64981C7.50015 6.41112 7.40533 6.1822 7.23654 6.01342C7.06776 5.84463 6.83884 5.74981 6.60015 5.74981ZM17.4001 5.74981C17.1615 5.74981 16.9325 5.84463 16.7637 6.01342C16.595 6.1822 16.5001 6.41112 16.5001 6.64981C16.5001 6.88851 16.595 7.11743 16.7637 7.28621C16.9325 7.45499 17.1615 7.54981 17.4001 7.54981C17.6388 7.54981 17.8678 7.45499 18.0365 7.28621C18.2053 7.11743 18.3001 6.88851 18.3001 6.64981C18.3001 6.41112 18.2053 6.1822 18.0365 6.01342C17.8678 5.84463 17.6388 5.74981 17.4001 5.74981Z"
        fill="white"
      />
    </svg>
  );
}

function FlowChartIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
      <path
        d="M6.59995 20.5998C4.86025 20.5998 3.44995 19.1895 3.44995 17.4498C3.44995 15.7101 4.86025 14.2998 6.59995 14.2998C8.02645 14.2998 9.23155 15.2484 9.61945 16.5498H14.7V14.7498H16.5V9.5676L14.4813 7.5498H9.29995V9.3498H3.89995V3.9498H9.29995V5.7498H14.4813L17.4 2.8302L21.2187 6.6498L18.3 9.5667V14.7498H20.1V20.1498H14.7V18.3498H9.61945C9.23245 19.6512 8.02645 20.5998 6.59995 20.5998ZM6.59995 16.0998C5.85475 16.0998 5.24995 16.7046 5.24995 17.4498C5.24995 18.195 5.85475 18.7998 6.59995 18.7998C7.34515 18.7998 7.94995 18.195 7.94995 17.4498C7.94995 16.7046 7.34515 16.0998 6.59995 16.0998ZM18.3 16.5498H16.5V18.3498H18.3V16.5498ZM17.4 5.3772L16.1274 6.6498L17.4 7.9224L18.6726 6.6498L17.4 5.3772ZM7.49995 5.7498H5.69995V7.5498H7.49995V5.7498Z"
        fill="white"
      />
    </svg>
  );
}

function GroupIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
      <path
        d="M3 21.0498C3 19.1402 3.75857 17.3089 5.10883 15.9586C6.45909 14.6083 8.29044 13.8498 10.2 13.8498C12.1096 13.8498 13.9409 14.6083 15.2912 15.9586C16.6414 17.3089 17.4 19.1402 17.4 21.0498H15.6C15.6 19.6176 15.0311 18.2441 14.0184 17.2314C13.0057 16.2187 11.6322 15.6498 10.2 15.6498C8.76783 15.6498 7.39432 16.2187 6.38162 17.2314C5.36893 18.2441 4.8 19.6176 4.8 21.0498H3ZM10.2 12.9498C7.2165 12.9498 4.8 10.5333 4.8 7.54978C4.8 4.56628 7.2165 2.14978 10.2 2.14978C13.1835 2.14978 15.6 4.56628 15.6 7.54978C15.6 10.5333 13.1835 12.9498 10.2 12.9498ZM10.2 11.1498C12.189 11.1498 13.8 9.53878 13.8 7.54978C13.8 5.56078 12.189 3.94978 10.2 3.94978C8.211 3.94978 6.6 5.56078 6.6 7.54978C6.6 9.53878 8.211 11.1498 10.2 11.1498ZM17.6556 14.4825C18.9204 15.0521 19.9938 15.9749 20.7467 17.1399C21.4997 18.3049 21.9001 19.6626 21.9 21.0498H20.1C20.1002 20.0094 19.7999 18.991 19.2352 18.1172C18.6705 17.2434 17.8654 16.5513 16.9167 16.1241L17.6547 14.4825H17.6556ZM17.0364 4.32148C17.9432 4.69525 18.7185 5.32996 19.2639 6.14509C19.8094 6.96021 20.1004 7.919 20.1 8.89978C20.1004 10.1349 19.6389 11.3255 18.8063 12.2377C17.9736 13.15 16.83 13.7179 15.6 13.83V12.0183C16.2668 11.9228 16.8855 11.616 17.3652 11.143C17.8448 10.67 18.1602 10.0557 18.265 9.39022C18.3699 8.72477 18.2586 8.04325 17.9475 7.4457C17.6365 6.84815 17.1421 6.36605 16.5369 6.07018L17.0364 4.32148Z"
        fill="white"
      />
    </svg>
  );
}
